<template>
    <data-table ref="dataTableRef" :columns="columns" :params="params" :offset-height="55" api="/log" selection select-on-row-click>
        <template #button="{selections}">
            <el-button v-auth="'log:delete'" @click="onDelete(selections)" :disabled="!selections?.length" type="danger"/>
        </template>
        <template #search>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="params.username"/>
            </el-form-item>
            <el-form-item label="操作描述" prop="operation">
                <el-input v-model="params.operation"/>
            </el-form-item>
            <el-form-item label="时间范围" prop="timeFrame" style="grid-column: span 2 / span 2; max-width: 420px;">
                <el-date-picker v-model="params.timeFrame" type="datetimerange" :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
        </template>
    </data-table>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {service} from "@/utils";
import DataTable from '@/components/data-table/index.vue';

const shortcuts = [
    {
        text: '昨天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            return [start, end]
        },
    },
    {
        text: '最近三天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            return [start, end]
        },
    },
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

const dataTableRef = ref<InstanceType<typeof DataTable>>();
const params = ref({
    username: undefined,
    operation: undefined,
    timeFrame: undefined
})
const columns = ref([
    {prop: 'id', label: 'ID', width: 80, fixed: 'left'},
    {prop: 'userId', label: '用户ID', width: 120, visible: false},
    {prop: 'username', label: '用户名', width: 120, fixed: 'left'},
    {prop: 'operation', label: '操作描述', width: 150, fixed: 'left', tooltip: true},
    {prop: 'method', label: '请求方法', width: 250, tooltip: true},
    {prop: 'params', label: '请求参数', width: 250, tooltip: true},
    {prop: 'time', label: '执行时长(ms)', width: 120},
    {prop: 'ip', label: 'IP地址', width: 150},
    {prop: 'createTime', label: '创建时间', width: 180},
    {prop: 'location', label: '操作地点', minWidth: 200, tooltip: true}
]);

// 删除
function onDelete (selections: { id: string }[]) {
    const ids = selections?.map(item => item.id);
    service.confirm(`确定对所选${ids.length}条日志记录进行删除操作`, {
        url: '/log',
        data: {logIds: ids},
        success: dataTableRef.value?.refresh
    })
}

</script>
